<template>
    <header id="login-header">
        <div class="header-content">
            <div class="top-right">
                <div><i class="icon-wx"></i></div>
                <div><i class="icon-qq"></i></div>
                <div><i class="icon-phone"></i><span>热线电话：0595-87517718</span></div>
                <div><a href="javascript:;" @click="$message.info('企业服务暂未开放')">企业服务</a></div>

                <div><router-link to="/login"> <span>个人登录</span> </router-link></div>
                <div><router-link to="/reg"> <span>个人注册</span> </router-link></div>
                <div><router-link to="/MainLogin"> <span>企业登录</span> </router-link></div>
                <div> <router-link to="/enterprise-register"> <span>企业注册</span> </router-link> </div>
                <div>
                    <a href="javascript:;" @click="trans('t')" :class="{'active': typeface == 't'}">繁</a>
                    <div class="line"></div>
                    <a href="javascript:;" @click="trans('s')" :class="{'active': typeface == 's'}">简</a>
                </div>
            </div>
        </div>
    </header>
</template>

<script>
export default {
    name: "login-header",
    data() {
        return {
            typeface: 's'
        };
    },
    created() {
    },
    methods: {
        trans(type) {
            this.$zhTran(type)
            this.typeface = type
        },
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    a {
        font-size: 14px;
        font-weight: 400;
        color: #B4C2D4;
        padding: 0;
        margin: 0;
        &:hover {
            font-weight: 400;
            color: #3EABC4;
        }
    }
    header{
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: #3B4D66;

        .header-content{
            width: 1200px;
            height: 40px;
            margin-left: auto;
            margin-right: auto;
            .top-right{
                float: right;
                div{
                    display: block;
                    font-size: 14px;
                    line-height: 40px;
                    color: #FBFEFF;
                    float: left;
                    margin-right: 30px;

                    i{
                        margin-top: 13px;
                        width: 15px;
                        height: 15px;
                        display: inline-block;
                        &.icon-qq{
                            background: url(../../../assets/image/qq.png) no-repeat;
                        }
                        &.icon-wx{
                            background: url(../../../assets/image/wx.png) no-repeat;
                        }
                        &.icon-phone{
                            float: left;
                            background: url(../../../assets/image/ipone.png) no-repeat;
                            margin-right: 10px;
                        }
                    }

                    span{
                        margin-top: 1px;
                        display: block;
                        float: left;
                    }

                    &:nth-child(3){
                        color: #FBFDFF;
                        opacity: 0.6;
                    }

                    &:nth-child(4){
                        margin-left: 30px;
                        margin-right: 50px;
                    }

                    &:last-child{
                        width: 52px;
                        margin-left: 50px;
                        a{
                            display: block;
                            float: left;
                            font-size: 14px;
                            color: #B3C2D4;

                            &.active{
                                color: #fff;
                            }
                        }

                        .line{
                            float: left;
                            width: 1px;
                            height: 14px;
                            background-color:#6A7C96;
                            margin-top: 14px;
                            margin-left: 10px;
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }
</style>